<template>
  <div>
    <table style="width: 100%">
      <tr>
        <td>
          <functional-calendar
            :change-month-function="true"
            :change-year-function="true"
            @dayClicked="dayClicked"
            :disabledDates="disabledDates"
            :markedDates="markedDates"
            :is-multiple-date-picker="true"
            ></functional-calendar>
        </td>
      </tr>

    </table>

  </div>
</template>

<script>

/* eslint-disable */
export default {
  
  data() {
    return {
      markedDates: ['1/7/2020','2/7/2020'], // 默认选中
      disabledDates: ['1/7/2020','2/7/2020'], // 不可点击
      selectDates: [] // 当前选中的日期
    }
  },
  methods: {
    dayClicked(item) {
      // console.log(JSON.stringify(item))
      if(item.isMarked == false) {
        this.selectDates.push(item.date)
      } else if(item.isMarked == true) {
        const date = item.date
        const ind = this.selectDates.indexOf(date)// 找到当前值在数组里的下标
        this.selectDates.splice(ind, 1) // 通过下标删除当前值
      }
      console.log(this.selectDates)
      // this.selectDates.push(item.date)
      // console.log(Object.assign(this.selectDates))
      // this.disabledDates.push(...this.selectDates) // ...是取出数组的属性值，类似于循环
      // console.log(this.disabledDates)
    }
  }
}
</script>

<style lang="scss">
.vfc-main-container {
  box-shadow: none;
  border: 1px solid #D4D4D4;
}
.vfc-content {
  margin: 0;
}
.vfc-dayNames {
  border-top: 1px solid #D4D4D4;
  padding-top: 15px;
  margin-bottom: 15px;
}
.vfc-content div:nth-child(4) .vfc-week:nth-child(5) + div {
  display: none;
}
.vfc-week .vfc-day:nth-child(7) {
  border-right: 0;
}
.vfc-week {
  border-top: 1px solid #D4D4D4;
  .vfc-day {
    margin-top: 0;
    border-right: 1px solid #D4D4D4;
    span.vfc-span-day {
      margin: 11px auto;
      font-size: 17px;
      padding: 5px;
    }
  } 
}
.vfc-top-date span.vfc-underline {
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid #4299e1;
}
.vfc-months-container .vfc-content {
  left: 24.3%
}
.vfc-week .vfc-day span.vfc-span-day.vfc-marked {
  background-color: #4299e1;
}
.vfc-months-container .vfc-content .vfc-months div.vfc-item {
  padding: 10px 0;
  margin: 0 10px;
}

</style>
